<template>
	<div class="tip" id="tip" v-if="tipSetting.tipShow" :style="{width:tipSetting.width+'px',height:tipSetting.height +'px'}">
        <div class="tip-title">

        </div>
        <div class="tip-context" :style="{height:tipSetting.height - 35 +'px'}">
            <div class="tip-text" :style="{height:tipSetting.height - 70 +'px'}" >{{tipSetting.context}}</div>
            <div class="tip-btns" style="height:35px;">
                <span v-for="btn in tipSetting.btns">
                    <button  @click="btnClick(btn.func)"> {{btn.text}}</button>
                </span>
            </div>
        </div>
        <div class="tip-mask" v-if="tipSetting.mask"></div>  
	</div>
</template>

<script>
export default {
  name: 'Tip',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tipSetting:{
          title:"",
          tipShow:true,
          type:"success",
          width:"400",
          height:"200",
          context:"测试tip",
          mask:false,
          params:{},
          btns:[{
              text:"确定",
              func:"confirm",
              class:""
          },{
              text:"取消",
              func:"cancle",
              class:""
          }]
      }
    }
  },
  template:'#tip',
  methods:{
        reLocal(width,height){
            this.dLeft =  (window.innerWidth - this.tipSetting.width)/2;
            this.dTop = (window.innerHeight - this.tipSetting.height) /2;
        },
        showTip(tipSetting){
            this.tipSetting = tipSetting
            this.tipSetting.tipShow = true
        },
        closeTip(event){
            this.tipSetting.tipShow = false
            if(event){
                this.$emit(event,this.tipSetting.params)
            }
        },
        btnClick(event){
            if(event){
                this.$emit(event,this.tipSetting.params)
            }
        }
  }
}
</script>

<style>
    .tip{
        border:1px solid #dddddd;
        position: absolute;
        left: 0;
        top:0;
        z-index: 1000;
    }
    .tip-title{
        height: 35px;
        background:dodgerblue;
    }
    .tip-context{
        margin:auto;
        background: #ffffff;

    }
    .tip-btns{

    }
    .tip-btns span{
        margin-left: 10px;
        margin-right: 10px;
    }
    .tip-btns span button{
        padding-left:10px;
        padding: 4px 15px;
    }
    .tip-mask{
        position: absolute;
        width:100%;
        height: 100%;
        top:0;
        left:0;
        z-index: 20;
        background: #ccc;
        opacity:0.5;
        filter:Alpha(opacity=50);
    }

</style>
